.popup {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .container {
    width: 84vw;
    height: 92.8vw;
    border-radius: 12px;
    overflow: hidden;

    display: grid;
    grid-template:
      'title' min-content
      '.' 12px
      'text' min-content
      '.' 10px
      'level-icon' min-content
      '.' 7px
      'level-name' min-content
      '.' 20px
      'check-btn' min-content
      / 1fr;
    place-items: center;
    padding: 24px 0 35px;

    position: relative;

    .bg {
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
      width: 100%;
      height: 100%;
    }

    .title {
      grid-area: title;
      font-size: 24px;
      font-weight: bold;
      color: #333333;
    }

    .text {
      grid-area: text;
      font-size: 14px;
      color: #333333;
    }

    .level-icon {
      grid-area: level-icon;
      width: 140px;
      height: 130px;
      border-radius: 4px;
    }

    .level-name {
      grid-area: level-name;
      font-size: 20px;
      font-weight: bold;
      color: #3a0000;
    }

    .check-btn {
      grid-area: check-btn;
      width: 222px;
      height: 46px;
      background: #f04465;
      border-radius: 56px;

      display: flex;
      align-items: center;
      justify-content: center;

      font-size: 16px;
      color: #ffffff;
    }
  }

  .close-btn {
    margin-top: 45px;
    place-self: center;
    width: 32px;
    height: 32px;
    opacity: 0.8;
  }
}
